import { useState } from "react";
import { Button } from "antd";
import { Document, DocumentProps, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/TextLayer.css";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  import.meta.url
).toString();

const App = () => {
  const [pageNumber, setPageNumber] = useState(1);
  const [numPages, setNumPages] = useState(0);

  const onDocumentLoadSuccess: DocumentProps["onLoadSuccess"] = ({
    numPages,
  }) => {
    setNumPages(numPages);
  };

  const prevPage = () => {
    if (pageNumber > 1) {
      setPageNumber(pageNumber - 1);
    }
  };

  const nextPage = () => {
    if (pageNumber < numPages) {
      setPageNumber(pageNumber + 1);
    }
  };

  return (
    <>
      <Button onClick={prevPage} disabled={pageNumber <= 1}>
        上一页
      </Button>
      <span>
        第{pageNumber}页，共{numPages}页
      </span>
      <Button onClick={nextPage} disabled={pageNumber >= numPages}>
        下一页
      </Button>
      <Document
        file="https://zhuzian-111.oss-cn-beijing.aliyuncs.com/zhuzian.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
    </>
  );
};

export default App;
